<template>
  <transition name="fade">
    <div class="m-menu-wrap" ref="wrap" v-show="visible">
      <transition name="fade">
        <div
          v-show="visible"
          class="m-menu-overlay"
          ref="overlay"
          @click="toggle"
        ></div>
      </transition>
      <transition name="down">
        <ul class="m-menu-list" v-show="visible">
          <li class="m-menu-item" v-for="(item, index) in items" :key="index">
            <a href="" class="m-menu-href">
              {{ item }}
            </a>
          </li>
        </ul>
      </transition>
    </div>
  </transition>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  components: {}
})
export default class Menu extends Vue {
  visible: boolean = false;
  items: Array<string> = [
    "全部",
    "技术",
    "创意",
    "好玩",
    "Apple",
    "酷工作",
    "交易",
    "城市",
    "问与答",
    "最热",
    "R2",
    "节点",
    "关注"
  ];

  mounted() {
    //@ts-ignore
  }

  show() {
    this.visible = true;
  }
  hide() {
    //@ts-ignore
    this.visible = false;
  }

  toggle() {
    this.visible ? this.hide() : this.show();
  }
}
</script>

<style lang="scss" scoped>
.m-menu-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 5;
  overflow: hidden;
}

.m-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.5;
  background: black;
}
.m-menu-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: absolute;
  padding: 8px;
  background: #fff;
  transform: translate(0%, 0%);
}
.m-menu-item {
  box-sizing: border-box;
  text-align: center;
  line-height: 30px;
  padding: 8px;
  width: 33.333%;
}
.m-menu-href {
  display: block;
  background-color: $themeColor;
  font-size: 14px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-leave-to {
  opacity: 0;
}

.down-enter-active,
.down-leave-active {
  transition: transform 0.2s;
}

.down-enter,
.down-leave-to {
  transform: translate(0%, -100%);
}
</style>
